*{
    padding: 0;
    margin: 0;
}
html,body{
    height: 100%;
}
/*-----------------------------加载-----------------------------------------*/
#jiaZai{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: #fff;
    text-align: center;
    z-index: 9999999;
}
#jiaZai img{
    width: 40%;
    margin: 50% auto;
    -webkit-animation:zhuanQuan 1s infinite;
}
@-webkit-keyframes zhuanQuan {
    0% {
        -webkit-transform:rotate(360deg);
    }
    100% {
        -webkit-transform:rotate(0deg);
    }
}
/*infinite backwards*/

#main1{
    display: none;
}
/* mian */
#main{
    height: 100%;
    margin: 0 auto;
    max-width: 640px;
    background: url('../image/bg_4.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 1px;
    overflow: hidden;
}
#main_header{
    width: 90%;
    margin: 0 auto;
    height: 100px;
    text-align: center;
}
.time_h{
    width: 50%;
    margin:2% auto;
    display:block;
}
.time_y{
    width: 35%;
    margin:5% auto;
    display:block;
}
#center{
    width: 90%;
    margin: 10% auto;
    border-top: 1px #525356 solid;
    border-bottom: 1px #525356 solid;
    padding: 8% 0;
}
.msg{
    width:50%;
    -webkit-animation:fadeInDown 1s backwards 1s;
}
#footer{
    position:fixed;
    bottom: 3%;
    width: 100%;
    margin: 5% auto;
    text-align: center;
}
.hdljs{
    width:40%;
    -webkit-animation:flash 3.5s  infinite;
}
/*-------------------------------main1-------------------------------------------*/
#main1{
    height: 100%;
    margin: 0 auto;
    max-width: 640px;
    background: url('../image/bg-img.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 1px;
    overflow: hidden;
}
#main1 .content{
    width: 90%;
    margin: 0 auto;
}
#main1 .logo{
    margin-top: 5%;
    width: 40%;
    -webkit-animation:fadeIn 1s backwards;
}
#main1 .slogan{
    width: 70%;
    margin-top: 5%;
    -webkit-animation:slideInRight .5s backwards 1s;
}
#main1 .explain{
    width: 70%;
    margin-top: 10%;
    -webkit-animation:flipInX 1s backwards 2s;
}
#main1 .winning{
    width: 45%;
    margin-top: 5%;
    -webkit-animation:bounceIn 1s backwards 3s;
}
#main1 a{
    -webkit-animation:fadeInDown 1s backwards 4s;
}
#main1 .button-img{
    margin-top:3%;
    width: 45%;
    //margin-left: -5%;
    -webkit-animation:pulse infinite 2s backwards 5s;
}
#main1 .selfcity{
    color:#fff;
    font-size:0.8em;
    font-weight: bold;
    display: block;
    margin-top:3%;
}
#main1 .main1yezhu{
    width: 46%;
    margin-top:3%;
}
/*-------------------------------main2-------------------------------------------*/
#main2,#main3{
    height: 100%;
    margin: 0 auto;
    max-width: 640px;
    background: url('../image/bg2-img.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 1px;
    overflow: hidden;
    -webkit-animation:fadeIn .5s backwards;
}
#main2 .content,#main3 .content{
    height: 100%;
    width: 100%;
    background: url('../image/board.png') no-repeat bottom;
    background-size: 100%;
    position: relative;
    -webkit-animation:bounceInDown 1s backwards .5s;
}
#main2 .cloud{
    width: 40%;
    margin: 10% 0 0 10%;
    -webkit-animation:shake infinite 30s backwards 1s;
}
#main2 .cloud-animation{
    -webkit-animation:slideInLeft 1s backwards 1s;
}
#main2 .sun{
    width: 25%;
    float: right;
    margin-top: 5%;
    -webkit-animation:pulse infinite 5s backwards 1s;
}
#main2 .sun-animation{
    -webkit-animation:slideInRight 1s backwards 1s;
}
#main2 .description{
    margin-top: 30%;
    text-align: center;
    position: relative;
}
#main2 .description1,#main2 .description2{
    width: 60%;
}
#main2 .description3{
    width: 80%;
    margin: 5% 0;
    -webkit-animation:fadeInDown 1s backwards 3.5s;
}
#main2 .description1{
    -webkit-animation:fadeIn 1s backwards 3s;
}
#main2 .description2{
    -webkit-animation:fadeInDown 1s backwards 4s;
}
#main2 .heart{
    width: 15%;
    position: absolute;
    right: 2%;
    bottom: 5%;
    -webkit-animation:pulse infinite 2s backwards 6s;
}
#main2 .heart-animation{
    -webkit-animation:fadeInLeft 1s backwards 4.5s;
}
#main2 .house{
    width: 100%;
    position: absolute;
    bottom: 15%;
    -webkit-animation:flipInX 1s backwards 2s;
}
/*-------------------------------main3-------------------------------------------*/
#main3 .fc3{
    width: 22%;
    margin: 2% 0 0 4%;
    -webkit-animation:shake infinite 25s backwards 5s;
}
#main3 .fc3-animation{
    -webkit-animation:bounceInRight 2s backwards 1s;
}
#main3 .home,#main3 .footer3{
    width: 90%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
#main3 .title3{
    width: 80%;
    margin-top: 5%;
    -webkit-animation:fadeIn 1s backwards 4s;
}
#main3 .xin3{
    width: 20%;
    position: absolute;
    right: 0;
    top: 20%;
    -webkit-animation:pulse infinite 2s backwards 8.5s;
}
#main3 .xin3-animation{
    -webkit-animation:fadeInUp 1s backwards 7s;
}
#main3 .filamy{
    width: 100%;
    margin-top: 5%;
    -webkit-animation:flipInX 1s backwards 3s;
}
#main3 .desc3{
    width: 100%;
    position: absolute;
    top: 33%;
}
#main3 .desc3 img{
    width: 60%;
    -webkit-animation:fadeInDown 1s backwards 6s;
}
#main3 .desc3 .you_img{
    width: 15%;
    margin-bottom: 5%;
    -webkit-animation:fadeInDown 1s backwards 5s;
}
#main3 .footer3 img{
   width: 90%;
    margin-top: 2%;
    -webkit-animation:fadeInUp 1s backwards 8s;
}
/*---------------------------箭头----------------------------------------*/
#arrow{
    display: none;
    width: 100%;
    position: fixed;
    bottom: 1%;
    text-align: center;
}
#arrow img{
    width: 10%;
    -webkit-animation:bounce infinite 2s;
}
/*--------------------------兼容---------------------------------*/
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    #main2 .description{
        margin-top: 15%;
    }
    #main3 .fc3{
        margin: 4% 0 0 4%;
    }
    #main3 .title3{
        margin-top: 5%;
    }
    #main3 .home,#main3 .footer3{
        width: 80%;
    }
    #main3 .filamy{
        margin-top: 5%;
    }
    #main3 .xin3{
        top: 20%;
    }
    #main3 .desc3{
        top: 33%;
    }


}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */





}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */

    #main3 .fc3{
        margin: 4% 0 0 4%;
    }
    #main3 .title3{
        margin-top: 5%;
    }

}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6P */

    #main3 .fc3{
        margin: 4% 0 0 4%;
    }
    #main3 .title3{
        margin-top: 5%;
    }


}
